<template>
  <div class="lsc-address">
    <van-address-edit
      :area-list="areaList"
      :address-info="addressInfo"
      show-delete
      @save="onSave"
      @delete="onDelete"
    />
    <div class="lsc-loading" v-if="isLoading">
      <div class="lsc-loading-mask"></div>
      <van-loading color="black" />
    </div>
  </div>
</template>

<script>
import api from '../../api'
import areaList from '../../area'
import areaIdList from '../../areaid'
import { mapGetters } from  'vuex'

export default {
  name: 'add-address',
  computed: {
    ...mapGetters({
      isLoading: 'getLoading',
      orderInfo: 'getOrderInfo'
    })
  },
  data () {
    return {
      areaList,
      areaIdList,
      searchResult: [],
      addressItem: [],
      addressInfo: {},
      addressSave: {
        id: 0,
        name: '',
        tel: '',
        province_id: 0,
        city_id: 0,
        area_code: '',
        address: '',
        postcode: '',
        is_default: false
      }
    }
  },
  created() {
    // 获取地址信息
    let addid = this.$route.query.id
    this.getAddressInfo(addid)
  },
  methods: {
    getAddressInfo(id) {

      this.$store.dispatch('fetchLoading', true)
      this.axios.get(api.agent.addressItem, {params:{id: id}})
        .then((res) => {
          this.$store.dispatch('fetchLoading', false)
          this.addressInfo = res.data.data
          this.turnAddressInfo(res.data.data)
        })
    },
    turnAddressInfo(arr) {
      this.addressInfo.address_detail = arr.address
    },
    getProvincesId(data) {

      let findProvincesId = this.areaIdList.provinces
      return findProvincesId.findIndex((value) => {
        return value.province_name == data
      })
    },
    getCitysId(data) {

      let findCitysId = this.areaIdList.citys
      return findCitysId.findIndex((value) => {
        return value.city_name == data
      })
    },
    onSave(content) {
      this.addressSave = {
        id: this.$route.query.id || 0,
        name: content.name,
        tel: content.tel,
        province_id: this.getProvincesId(content.province) + 1,
        city_id: this.getCitysId(content.city) + 1,
        area_code: content.area_code,
        address: content.county + ' ' + content.address_detail,
        is_default: content.is_default
      }
      
      this.$toast.loading({
        duration: 0,
        message: '正在保存...'
      });

      this.axios.post(api.agent.saveAddress, this.addressSave)
        .then(res=>{
          if (res.data.retcode != 0) {
            this.$toast.fail(res.data.retmsg);
          }else {
            this.$toast.clear()
            this.$router.push('/addlist')
          }
        })

    },
    onDelete() {
      this.$toast.loading({
        duration: 0,
        message: '正在删除...'
      });

      this.axios.delete(`${api.agent.delAddress}/${this.addressInfo.id}`)
        .then(res=>{
          if (res.data.retcode != 0) {
            this.$toast.fail(res.data.retmsg);
          }else {
            this.$toast.clear()
            this.$router.push('/addlist')
          }
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
